<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form-demo</title>
</head>
<body>
    <form action="">
        <!-- form:表单域 -->
            <input type="text" placeholder="请输入你的昵称" name="userName" id="user">
            <label for="user">昵称</label>
            <br>
            <input type="password" placeholder="请输入六位密码" maxlength="6" name="userPsw">密码
            <!-- password:暗文密码框 -->
            <!-- maxlength:控制最大输入字符数 -->
            <br>
            性别:<input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex" checked>不详
            <br>
            游戏:<input type="checkbox" name="game" id="nongyao"> <label for="nongyao">玩着农药</label> 
            <!-- label是用来绑定文字与标签的,使用id与for属性来产生联系 -->
       
            <input type="checkbox" name="game">绝地吃鸡<input type="checkbox" name="game" checked>守望屁股<input type="checkbox" name="game">峡谷一日游
            <br>
            食物:<input type="checkbox" name="food" checked>烤榴莲<input type="checkbox" name="food">烤棉花糖<input type="checkbox" name="food">烤西瓜
    
            <br>
            普通按钮 <input type="button" value="按钮">
            <br>
            提交按钮 <input type="submit">
            <br>
            重置 <input type="reset">
            <!-- 为什么重置按钮没有效果? -->
            <!-- 你没有告诉你要重置哪一张表单 -->
            <!-- 想要让重置按钮有效果,那么必须配合form表单域标签 -->
            <br>
            图片按钮 <input type="image" width="20px" height="20px" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1566875796&di=3ea66f48bd6b96f60ca9bcb29b265564&src=http://dpic.tiankong.com/1k/35/QJ8133550638.jpg">
            <br>
            h5c3版本的按钮 <button>新的按钮</button>
            <br>
            提交身份证正面: <input type="file">
            <!--file:单文件上传  -->
    </form>

</body>
</html>